<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no, email=no">
    <meta name="HandheldFriendly" content="true">
    <title>QUI Demo</title>
    <script type="text/javascript" src="http://tajs.qq.com/stats?sId=37342703" charset="UTF-8"></script>

    
    <link rel="stylesheet" href="../../../../css/frozenui.css">
    <link rel="stylesheet" href="../../../css/style.css">
    

    
</head>

<body ontouchstart>
    <section class="ui-container">
        
<section id="list">
    <h1 class="title">LIST</h1>
    <!-- 单行文本 -->
    <div class="demo-item">
        <p class="demo-desc">单行列表(纯文字)</p>
        <div class="demo-block">
            <ul class="ui-list ui-list-single ui-list-link ui-border-tb">
                <li class="ui-border-t">
                    <div class="ui-list-info">
                        <h4 class="ui-nowrap">性别</h4>
                        <div class="ui-txt-info">男</div>
                    </div>
                </li>
                <li class="ui-border-t">
                    <div class="ui-list-info">
                        <h4 class="ui-nowrap">生日</h4>
                        <div class="ui-reddot ui-reddot-static"></div>
                    </div>
                </li>
            </ul>
           <!--  <ul class="ui-list ui-list-one ui-list-link ui-border-tb">
                <li>
                    <div class="ui-list-thumb">
                        <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
                    </div>
                    <div class="ui-list-info ui-border-t">
                        <h4 class="ui-nowrap">性别</h4>
                        <div class="ui-txt-info">男</div>
                    </div>
                </li>
                <li>
                    <div class="ui-list-thumb">
                        <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
                    </div>
                    <div class="ui-list-info ui-border-t">
                        <h4 class="ui-nowrap">生日</h4>
                        <div class="ui-reddot ui-reddot-static"></div>
                    </div>
                </li>
            </ul> -->
        </div>
    </div>
    <!-- 单行小图 -->
    <div class="demo-item">
        <p class="demo-desc">单行头像</p>
        <div class="demo-block">
            <ul class="ui-list ui-list-link ui-list-single ui-border-tb">
                <li>
                    <div class="ui-avatar-s">
                        <span style="background-image:url(http://placeholder.qiniudn.com/68x68)"></span>
                    </div>
                    <div class="ui-list-info ui-border-t">
                        <h4 class="ui-nowrap">ui-avatar-s单行头像</h4>
                    </div>
                </li>
                <li>
                    <div class="ui-avatar-s">
                        <span style="background-image:url(http://placeholder.qiniudn.com/68x68)"></span>
                    </div>
                    <div class="ui-list-info ui-border-t">
                        <h4 class="ui-nowrap">ui-avatar-s单行头像</h4>
                    </div>
                </li>
                <li>
                    <div class="ui-avatar-s">
                        <span style="background-image:url(http://placeholder.qiniudn.com/68x68)"></span>
                    </div>
                    <div class="ui-list-info ui-border-t">
                        <h4 class="ui-nowrap">ui-avatar-s单行头像</h4>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="demo-item">
        <p class="demo-desc">单行小缩略图</p>
        <div class="demo-block">
            <ul class="ui-list ui-list-single ui-list-link ui-border-tb">
                <li>
                    <div class="ui-list-thumb-s ui-border-t">
                        <span style="background-image:url(http://placeholder.qiniudn.com/68x68)"></span>
                    </div>
                    <div class="ui-list-info">
                        <h4 class="ui-nowrap">性别</h4>
                        <div class="ui-txt-info">男</div>
                    </div>
                </li>
                <li>
                    <div class="ui-list-thumb-s">
                        <span style="background-image:url(http://placeholder.qiniudn.com/68x68)"></span>
                    </div>
                    <div class="ui-list-info ui-border-t">
                        <h4 class="ui-nowrap">生日</h4>
                        <div class="ui-reddot ui-reddot-static"></div>
                    </div>
                </li>
            </ul>

        </div>
    </div>

    <!-- 单行缩略图 -->
    <div class="demo-item">
        <p class="demo-desc">单行缩略图</p>
        <div class="demo-block">
            <ul class="ui-list ui-list-link ui-border-tb">
                <li>
                    <div class="ui-list-thumb">
                        <span style="background-image:url(http://placeholder.qiniudn.com/80x80)"></span>
                    </div>
                    <div class="ui-list-info ui-border-t">
                        <h4 class="ui-nowrap">ui-list-thumb缩略图</h4>
                    </div>
                </li>
                <li>
                    <div class="ui-list-thumb">
                        <span style="background-image:url(http://placeholder.qiniudn.com/80x80)"></span>
                    </div>
                    <div class="ui-list-info ui-border-t">
                        <h4 class="ui-nowrap">ui-list-thumb缩略图</h4>
                    </div>
                </li>
                <li>
                    <div class="ui-list-thumb">
                        <span style="background-image:url(http://placeholder.qiniudn.com/80x80)"></span>
                    </div>
                    <div class="ui-list-info ui-border-t">
                        <h4 class="ui-nowrap">ui-list-thumb缩略图</h4>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!--  -->

    <!-- 单行小图 -->
    <div class="demo-item">
        <p class="demo-desc">双行头像</p>
        <div class="demo-block">
            <ul class="ui-list ui-list-link ui-border-tb">
                <li>
                    <div class="ui-avatar">
                        <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
                    </div>
                    <div class="ui-list-info ui-border-t">
                        <h4 class="ui-nowrap">ui-avatar</h4>
                        <p>双行头像</p>
                    </div>
                </li>
                <li>
                    <div class="ui-avatar">
                        <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
                    </div>
                    <div class="ui-list-info ui-border-t">
                        <h4 class="ui-nowrap">ui-avatar</h4>
                        <p>双行头像</p>
                    </div>
                </li>
                <li>
                    <div class="ui-avatar">
                        <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
                    </div>
                    <div class="ui-list-info ui-border-t">
                        <h4 class="ui-nowrap">ui-avatar</h4>
                        <p>双行头像</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 单行小图 -->
    <div class="demo-item">
        <p class="demo-desc">按钮</p>
        <div class="demo-block">
            <ul class="ui-list ui-list-function ui-border-tb">
                <li>
                    <div class="ui-avatar">
                        <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
                    </div>
                    <div class="ui-list-info ui-border-t">
                        <h4 class="ui-nowrap">ui-avatar</h4>
                        <p>双行头像</p>
                    </div>
                    <div class="ui-btn">PK</div>
                </li>
                <li>
                    <div class="ui-avatar">
                        <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
                    </div>
                    <div class="ui-list-info ui-border-t">
                        <h4 class="ui-nowrap">ui-avatar</h4>
                        <p>双行头像</p>
                    </div>
                    <div class="ui-btn-s">PK</div>
                </li>
                <li>
                    <div class="ui-avatar">
                        <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
                    </div>
                    <div class="ui-list-info ui-border-t">
                        <h4 class="ui-nowrap">ui-avatar</h4>
                        <p>双行头像</p>
                    </div>
                    <div class="ui-btn">PK</div>
                </li>
            </ul>
        </div>
    </div>

    <!-- 单行小图 -->
    <div class="demo-item">
        <p class="demo-desc">多行头像</p>
        <div class="demo-block">
            <ul class="ui-list ui-list-link ui-border-tb">
                <li>
                    <div class="ui-avatar-lg">
                        <span style="background-image:url(http://placeholder.qiniudn.com/140x140)"></span>
                    </div>
                    <div class="ui-list-info ui-border-t">
                        <h4 class="ui-nowrap">ui-avatar-lg</h4>
                        <p>多行头像</p>
                        <p>多行头像</p>
                    </div>
                </li>
                <li>
                    <div class="ui-avatar-lg">
                        <span style="background-image:url(http://placeholder.qiniudn.com/140x140)"></span>
                    </div>
                    <div class="ui-list-info ui-border-t">
                        <h4 class="ui-nowrap">ui-avatar-lg</h4>
                        <p>多行头像</p>
                        <p>多行头像</p>
                    </div>
                </li>
                <li>
                    <div class="ui-avatar-lg">
                        <span style="background-image:url(http://placeholder.qiniudn.com/140x140)"></span>
                    </div>
                    <div class="ui-list-info ui-border-t">
                        <h4 class="ui-nowrap">ui-avatar-lg</h4>
                        <p>多行头像</p>
                        <p>多行头像</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 单行小图 -->
    <div class="demo-item">
        <p class="demo-desc">图片在右</p>
        <div class="demo-block">
            <ul class="ui-list ui-list-nospace ui-border-tb">
                <li class="ui-border-t ui-arrowlink">

                    <div class="ui-list-info">
                        <h4 class="ui-nowrap">ui-list-icon</h4>
                        <p class="ui-nowrap">两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行</p>
                    </div>
                </li>
                <li class="ui-border-t">
                    <div class="ui-list-info">
                        <h4 class="ui-nowrap">ui-list-icon</h4>
                        <p class="ui-nowrap">两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两行两</p>
                    </div>
                    <div class="ui-list-img-square">
                        <span style="background-image:url(http://placeholder.qiniudn.com/188x188)"></span>
                    </div>
                </li>
                <li class="ui-border-t">
                    <div class="ui-list-info">
                        <h4 class="ui-nowrap">ui-list-icon</h4>
                        <p>两行</p>
                    </div>
                    <div class="ui-list-img-square">
                        <span style="background-image:url(http://placeholder.qiniudn.com/188x188)"></span>
                    </div>
                </li>
            </ul>
        </div>
    </div>


    <!-- <div class="demo-item">
        <p class="demo-desc">通栏和默认带active列表</p>
        <div class="demo-block">
            <ul class="ui-list ui-list-text ui-list-active ui-list-cover ui-border-tb">
                <li class="ui-border-t">
                    <p>加ui-list-active会带按压态</p>
                </li>
                <li class="ui-border-t">
                    <p>加ui-list-cover通栏</p>
                </li>
            </ul>
        </div>
    </div> -->
    <div class="demo-item">
        <p class="demo-desc">图文列表正方形固定大小</p>
        <div class="demo-block">
            <ul class="ui-list ui-border-tb ">
                <li>
                    <div class="ui-list-img-square">
                        <span style="background-image:url(http://placeholder.qiniudn.com/188x188)"></span>
                    </div>
                    <div class="ui-list-info ui-border-t">
                        <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
                        <p class="ui-nowrap">这是内容，加ui-nowrap可以超出长度截断</p>
                    </div>
                </li>
                <li>
                    <div class="ui-list-img-square">
                        <span  style="background-image:url(http://placeholder.qiniudn.com/188x188)"></span>
                    </div>
                    <div class="ui-list-info ui-border-t">
                        <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
                        <p class="ui-nowrap">这是内容，加ui-nowrap可以超出长度截断</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <!-- 视频类 -->
    <div class="demo-item">
        <p class="demo-desc">图文列表（垂直）</p>
        <div class="demo-block">
            <ul class="ui-list ui-border-tb">
                <li>
                    <div class=" ui-list-img-vertical">
                        <span style="background-image:url(http://placeholder.qiniudn.com/216x308)"></span>
                    </div>
                    <div class="ui-list-info ui-border-t">
                        <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
                        <p class="ui-nowrap">这是内容，加ui-nowrap可以超出长度截断</p>
                    </div>
                </li>
                <li>
                    <div class="ui-list-img-vertical">
                        <span style="background-image:url(http://placeholder.qiniudn.com/216x308)"></span>
                    </div>
                    <div class="ui-list-info ui-border-t">
                        <h4>标题标题标题标题标题标题标题标题标题标题标题</h4>
                    </div>
                </li>
            </ul>
           <!--  <div class="ui-loading-wrap">
                <p>加载中</p>
                <i class="ui-loading"></i>
            </div> -->
        </div>
    </div>

    <!-- 书籍类 -->
    <div class="demo-item">
        <p class="demo-desc">图文列表（横）</p>
        <div class="demo-block">
            <ul class="ui-list  ui-border-tb">
                <li class="active">
                    <div class=" ui-list-img-horizontal">
                        <span style="background-image:url(http://placeholder.qiniudn.com/268x188)"></span>
                    </div>
                    <div class="ui-list-info ui-border-t">
                        <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
                        <p>这是内容</p>
                        <p></p>
                        <p></p>
                    </div>
                </li>
                <li>
                    <div class="ui-list-img-horizontal">
                        <span style="background-image:url(http://placeholder.qiniudn.com/268x188)"></span>
                    </div>
                    <div class="ui-list-info ui-border-t">
                        <h4>标题标题标题标题</h4>
                         <p>这是内容</p>
                        <p></p>
                        <p></p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="demo-item">
        <p class="demo-desc">图文列表（横）</p>
        <div class="demo-block">
            <ul class="ui-list  ui-border-tb ui-list-nospace">
                <li>
                    <div class="ui-list-img-horizontal">
                        <span style="background-image:url(http://placeholder.qiniudn.com/268x188)"></span>
                    </div>
                    <div class="ui-list-info">
                        <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
                        <p>这是内容</p>
                        <p></p>
                        <p></p>
                    </div>
                </li>
                <li>
                    <div class="ui-list-img-horizontal">
                        <span style="background-image:url(http://placeholder.qiniudn.com/268x188)"></span>
                    </div>
                    <div class="ui-list-info ui-border-t">
                        <h4>标题标题标题标题</h4>
                         <p>这是内容</p>
                        <p></p>
                        <p></p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="demo-item">
        <p class="demo-desc">图文列表图片不固定大小</p>
        <div class="demo-block">
            <ul class="ui-list ui-list-nospace ui-border-tb ">
                <li>
                    <div class="ui-list-img">
                        <div class="ui-img-vertical">
                            <span style="background-image:url(http://placeholder.qiniudn.com/248x352)"></span>
                        </div>
                    </div>
                    <div class="ui-list-info ui-border-t">
                        <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
                        <p class="ui-nowrap">这是内容，加ui-nowrap可以超出长度截断</p>
                    </div>
                </li>
                <li>
                    <div class="ui-list-img">
                        <div class="ui-img-vertical">
                            <span  style="background-image:url(http://placeholder.qiniudn.com/248x352)"></span>
                        </div>
                    </div>
                    <div class="ui-list-info ui-border-t">
                        <h4 class="ui-nowrap">这是标题，加ui-nowrap可以超出长度截断</h4>
                        <p class="ui-nowrap">这是内容，加ui-nowrap可以超出长度截断</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</section>

    </section>

    <script src="http://open.mobile.qq.com/sdk/qqapi.js?_bid=152"></script>
    <script>
    var _mtac = {};
    (function() {
        var mta = document.createElement("script");
        mta.src = "http://pingjs.qq.com/h5/stats.js?v2.0.2";
        mta.setAttribute("name", "MTAH5");
        mta.setAttribute("sid", "500421336");
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(mta, s);
    })();
    </script>

    
    <script src="../../../js/lib/zepto.min.js"></script>
    <script src="../../../js/index.js"></script>
    

    
</body>
</html>
